<!--  -->
<template>
  <van-nav-bar title="物流状态" left-text="返回" left-arrow @click-left="onClickLeft" />

  <div class="">
    <!-- closeable 模式，在右侧显示关闭按钮 -->
    <van-notice-bar mode="closeable">打开系统通知，随时接收物流状态。</van-notice-bar>

    <div class="service">
      <div class="courier">
        <div class="manager">
          <van-icon name="manager" />
          <span>快递员：迪迦奥特曼</span>
        </div>
        <p>打赏快递员</p>
        <p>拨打电话</p>
      </div>
      <div class="logistics">
        <van-icon name="logistics" />
        <div class="address">
          <p>订单编号：26484-61366862<span>复制</span></p>
          <p>收货地址：四川省成都市武侯区肖家河大厦（三楼千锋教育）</p>
        </div>
      </div>
    </div>
  </div>
  <div class=''>
    <van-steps :active="active" active-icon="success" active-color="#38f">
      <van-step>支付完成</van-step>
      <van-step>商家拣货中</van-step>
      <van-step>商家已发货</van-step>
      <van-step>运输中</van-step>
      <van-step>已签收</van-step>
    </van-steps>

    <van-steps direction="vertical" :active="0">
      <van-step>
        <h3>【城市】成都市转运中心已收入</h3>
        <p>2022-10-22 12:27</p>
      </van-step>
      <van-step>
        <h3>【城市】佛山转运中心已发出，下一站：成都市转运中心</h3>
        <p>2022-10-21 05:40:45</p>
      </van-step>
      <van-step>
        <h3>【城市】佛山转运中心已转入</h3>
        <p>2022-10-20 23:30:14</p>
      </van-step>
      <van-step>
        <h3>【城市】广东省佛山市禅城已发出。下一站：佛山转运中心</h3>
        <p>2012-10-19 14:10:02</p>
      </van-step>
      <van-step>
        <h3>商家已发货，正在通知圆通快递取件</h3>
        <p>2022-10-19 07:39:25</p>
      </van-step>
      <van-step>
        <h3>订单确认，已通知商家配货</h3>
        <p>2022-10-18 21:11:07</p>
      </van-step>
    </van-steps>

  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';


const active = ref(3)
const onClickLeft = () => {
  history.back()
}
</script>
<style scoped lang="scss">
.service {
  padding: 25px 10px;

  .courier {
    height: 30px;
    padding: 10px 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    justify-content: space-between;
    align-items: center;

    .manager {
      span {
        font-size: 14px;
        margin: 0;
      }
    }

    p {
      border: 1px solid #ccc;
      font-size: 12px;
      margin: 0;

      padding: 5px;
      border-radius: 10px;
    }
  }

  .logistics {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .address {
      margin-left: 10px;
      p{
        margin:  10px 0;
        font-size: 14px ;
        span{
          margin-left: 80px;
        }
      }
    }
  }
}
</style>